<template>
  <div class="resource-list">
    <mt-header fixed title="政策文件管理">
      <router-link :to="{name:'index'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <a slot="right" @click="filterPOPVisible = !filterPOPVisible">
        <i class="fa fa-filter"></i>
      </a>
    </mt-header>
    <div id="wrapper" ref="scrollWrap">
      <div class="scroller" ref="scroller">
        <a class="previous-link" v-if="isShowPrevious" @click="goPrevious">
          <i class="fa fa-arrow-circle-up"></i>
          返回上一级
        </a>
        <ul ref="scrollList" v-if="resourceInfoList.length > 0">
          <li v-for="resourceInfo in resourceInfoList" :key="resourceInfo.id" @click="handleLinkToFile(resourceInfo)">
            <policy-list-item :resourceInfo="resourceInfo"></policy-list-item>
          </li>
        </ul>
        <empty-list v-else></empty-list>
      </div>
    </div>
    <mt-popup
      v-model="filterPOPVisible"
      position="left"
      class="filer-pop">
      <div class="search-panel">
        <div class="panel-header">
          <mt-header fixed title="">
            <a slot="left">
              <i class="fa fa-filter"></i>
              政策文件检索
            </a>
            <a slot="right" @click="filterPOPVisible = !filterPOPVisible">
              <span>关闭</span>
            </a>
          </mt-header>
        </div>
        <div class="panel-body">
          <div class="search-input-wrapper">
            <mt-search
              v-model="searchValue"
              cancel-text="取消"
              :show="false"
              placeholder="文件名搜索">
              <mt-cell title=""></mt-cell>
              <policy-list-item  v-for="item in searchResults" :resourceInfo="item" :key="item.id" @click.native="handleLinkToFile(item)"></policy-list-item>
            </mt-search>
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import fetch from '../../utils/fetch'
  import { Indicator } from 'mint-ui';
  import EmptyList from '../Empty-List'
  import PolicyListItem from './PolicyListItem.vue'
  /*获取当前缩放比*/
  const DEVICE_RATIO=getDeviceRatio();


  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   * @param stop 下拉刷新后回滚
   */

  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop:20*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  export default {
    data (){
      return{
        resourceInfoList:[],
        isShowPrevious: false,
        searchResults:[],
        searchValue: '',
        filterPOPVisible: false,
      }
    },
    components:{
      EmptyList,
      PolicyListItem
    },
    methods:{
      handleGetDiskList(parentPath){
        fetch('/api/resource/list?path='+ parentPath + '&category=2').then(response =>{
          if(response.data.success) {
            this.resourceInfoList = response.data.obj
          }
          setTimeout(()=>{
            Indicator.close()
          }, 300)
        })
      },
      handleLinkToFile(resourceInfo) {
        if (resourceInfo.dirType === 0) {
          Indicator.open()
          this.isShowPrevious = true
          this.handleGetDiskList('/'+resourceInfo.name)
        } else {
          window.open('/api/resource/'+resourceInfo.id)
        }
      },
      goPrevious(){
        Indicator.open()
        this.handleGetDiskList('')
        this.isShowPrevious = false
      }
    },
    created(){
      Indicator.open()
      this.handleGetDiskList('')
    },
    mounted(){
      const {scroller,scrollWrap,scrollList}=this.$refs;
      this.scroller = new BScroll(scrollWrap,{
        click:true,
        probeType:3,
        pullDownRefresh:DOWN_CONFIG,
        pullUpLoad:UP_CONFIG
      });
    },
    watch:{
      searchValue(){
        fetch('/api/resource/search?category=2&fileName='+ this.searchValue).then(response => {
          if(response.data.success) {
            this.searchResults = response.data.obj
          }
        })
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .resource-list{
    background: #F0EFF5;
    height: 100%;
  }
  #wrapper{
    position: fixed;
    top: 40px;
    bottom: 3px;
    width: 100%;
    overflow: hidden;
    background:#F0EFF5;
    z-index: 0;
    .scroller{
      position: absolute;
      width: 100%;
      &.topPadding{
        top:1rem;
      }
      .previous-link{
        display: inline-block;
        width: 100%;
        background: #fff;
        padding: 10px;
        @include fz(6px)
      }

    }
  }

  .search-panel{
    display: block;
    .panel-header{
      background: #26A2FF;
      height: 40px;
    }
    .panel-body {
      .search-input-wrapper {
      }
      .btn-wrapper{
        padding: 20px;
        text-align: center;
      }
    }
  }
  .filer-pop{
    height: 100%;
    width: 70%;
  }
</style>
